<nz-card [nzBordered]="false">
    <nz-row nzGutter="8">
        <nz-col nzMd="20" nzSm="12">
            <button nz-button [nzType]="'primary'" *ngIf="isGranted('Pages.Editions.Create')" (click)="createEdition()">
                <i nz-icon type="plus"></i>
                <span>
                    {{"CreateNewEdition" | localize}}
                </span>
            </button>
        </nz-col>
    </nz-row>
    <nz-row class="my-md">
        <nz-table #nzDataTable [nzData]="dataList" [nzLoading]="isTableLoading" nzShowPagination="false"
            [nzNoResult]="noDataTemplate">
            <ng-template #noDataTemplate>
                <no-data></no-data>
            </ng-template>
            <thead (nzSortChange)="gridSort($event)">
                <tr>
                    <th nzShowSort nzSortKey="tenancyName">
                        {{'EditionName' | localize}}
                    </th>
                    <th nzShowSort nzSortKey="creationTime" class="text-center">
                        {{'CreationTime' | localize}}
                    </th>
                    <th class="text-center">
                        {{'Actions' | localize}}
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let item of nzDataTable.data">
                    <td>
                        {{item.displayName}}
                    </td>
                    <td class="text-center">
                        {{item.creationTime | momentFormat:'L'}}
                    </td>
                    <td class="text-center">
                        <ng-container *ngIf="isGranted('Pages.Editions.Edit')">
                            <a (click)="editEdition(item)">
                                <i nz-icon type="edit"></i>
                                {{'Edit' | localize}}
                            </a>
                            <nz-divider nzType="vertical"></nz-divider>
                        </ng-container>
                        <ng-container *ngIf="isGranted('Pages.Editions.Delete')">
                            <nz-popconfirm [nzTitle]="'EditionDeleteWarningMessage'| localize:item.displayName" (nzOnConfirm)="deleteEdition(item)"
                                [nzOkText]="l('Ok')" [nzCancelText]="l('Cancel')">
                                <a nz-popconfirm>
                                    <i nz-icon type="delete"></i>
                                    {{'Delete' | localize}}
                                </a>
                            </nz-popconfirm>
                        </ng-container>
                    </td>
                </tr>
            </tbody>
        </nz-table>
    </nz-row>
</nz-card>
